<template>
  <div class="container">
      <el-row :gutter="10" justify="start" style="margin-bottom: 20px">
          <el-col :span="8">
              <label >订单号: </label>
              <span style="margin-left: 10px">{{xq.ddid}}</span>
          </el-col>
          <el-col :span="8">
              <label >订单状态: </label>
              <span style="margin-left: 10px">{{xq.ddzt}}</span>
          </el-col>
          <el-col :span="2" >
              <label style="white-space: nowrap;">下单时间:{{xq.ddsj}}</label>
          </el-col>
      </el-row>
      <el-row justify="start" >
              <el-form :model="form" label-width="auto" style="min-width: 600px">
                  <div style="display: flex;">
                      <el-form-item label="用户名:" style="margin-right: 215px">
                          <span>{{xq.yhid}}</span>
                      </el-form-item>
                      <el-form-item label="手机号:">
                          <span>{{xq.userInfo.phone}}</span>
                      </el-form-item>
                  </div>
                  <el-form-item label="地址:" style="margin-left: -15px">
                      <span style="margin-left: 10px">{{xq.dddz}}</span>
                  </el-form-item>
                  <el-button plain @click="open" type="warning" style="margin-bottom: 15px">订单备注</el-button>
                  <el-form-item label="菜品">
                      <el-scrollbar height="100px">
                      <div style="display: flex;margin-left: 50px;height: 20px;width: 100%">
                              <el-table :data="xq.caiPinDetails" style="width: 100%">
                                  <el-table-column label="菜品名称" prop="cpmc"></el-table-column>
                                  <el-table-column label="数量" prop="cpsl"></el-table-column>
                                  <el-table-column label="单价" prop="cpdj"></el-table-column>
                              </el-table>
                      </div>
                      </el-scrollbar>
                  </el-form-item>
                  <el-form-item label="费用">
                      <div style="height: 20px;width: 100%;margin-left: 20px;padding: 10px 10px">
                          <span style="margin-right: 100px">菜品小计：￥ {{xq.tprice}}</span>
                          <span>配送费：￥ {{xq.psf}}</span>
                          <span style="margin-left: 90px">打包费：￥ {{xq.dbf}}</span>
                          <span style="margin-left: 90px">订单总价：￥ {{total}}</span>
                      </div>
                  </el-form-item>
              </el-form>
      </el-row>

      <!-- 新增 dialog-->
      <el-dialog v-model="addDialogVisible" title="新增订单详情" width="40%" top="2vh" destroy-on-close>
          <add-d-d-x-q
                  @flushPage="reset"
                  @closeDialog="addDialogVisible = false">
          </add-d-d-x-q>
      </el-dialog>

      <!-- 更新 dialog-->
      <el-dialog v-model="updateDialogVisible" title="更新订单详情" width="40%" top="2vh" destroy-on-close>
          <update-d-d-x-q ref="updatePageRef"
                          @flushPage="reset"
                          @closeDialog="updateDialogVisible = false">
          </update-d-d-x-q>
      </el-dialog>
  </div>
</template>

<script setup >
import {computed, nextTick, onMounted, reactive, ref} from 'vue'
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";
import AddDDXQ from "./AddDDXQ.vue";
import UpdateDDXQ from "./UpdateDDXQ.vue";
//详情列表
const xq = reactive({
    ddxq: '',
    ddid: '',
    cpid: '',
    cpsl: '',
    cpdj: '',
    ddsj: '',
    tprice: '',
    ddbz: '',
    userInfo: [],   // 用户表中的信息
    caiPinDetails: [], // 菜品详情列表
    dbf: '',
    psf: ''
})
const url = "http://localhost:8088/team/upload/"

const xqList = ref()
const value1 = ref('')
// 新增：标记是否为用户主动查询（初始为 false）
const isUserQuery = ref(false);
const form = reactive({
    name: '',
    region: '',
    date1: '',
    date2: '',
    delivery: false,
    type: [],
    resource: '',
    desc: '',
})
const user = JSON.parse(localStorage.getItem('userInfo'))
const onSubmit = () => {
    console.log('submit!')
}
onMounted(() =>{
  doList();
})
const open = () => {
    ElMessageBox.alert(
        `<strong>${xq.ddbz}</strong>`,
        '订单备注',
        {
            dangerouslyUseHTMLString: true,
        }
    )
}
const total = computed(() => Number(xq.psf) + Number(xq.dbf) + Number(xq.tprice));
const doList = async () => {
  xqList.value = [];
  const url = xq.xqid ? `/api/xiangqing/${xq.xqid}` : '/api/xiangqing';
  const {data} = await axios.get(url)
  if(data.code === 200){
      // 将后端数据赋值给响应式对象
      Object.assign(xq, data.data);
    xqList.value = xq.xqid
        ? [data.data]
        : data.data;
      // 只有用户主动查询时才显示成功提示
      if (isUserQuery.value) {
          ElMessage.success('查询成功');
      }
      xq.userInfo.phone = user.phone
      await getPrice()
  }else{
      // 错误提示始终显示（无论是否用户操作）
      ElMessage.error(data.message);
  }
}
const getPrice = async () => {
    const {data} = await axios.get(`/api/dingdan/${xq.ddid}`)
    if(data.code === 200){
        await getPrice2(data.data.sjid)
    }
}

const getPrice2 = async (sjid) => {
    const {data} = await axios.get(`/api/shangjia/id/${sjid}`)
    if (data.code === 200) {
        xq.dbf = data.data.dbf
        xq.psf = data.data.psf
    }
}

// 接收父组件传递的数据
const handleShowData = (obj)=>{
    Object.assign(xq, obj);
}

// 暴露给父组件的方法
defineExpose({
    handleShowData
})


const reset = () => {
  xq.xqid = '';
    isUserQuery.value = true; // 标记为用户操作
  doList();
}
// 查询按钮点击：用户主动操作，需要显示提示
const handleQuery = () => {
    isUserQuery.value = true; // 标记为用户操作
    doList();
}

const addDialogVisible = ref(false)
const showAddDialog = () => {
  addDialogVisible.value = true;
}

const updateDialogVisible = ref(false)
const updatePageRef = ref();
const showUpdateDialog = (row) => {
  updateDialogVisible.value = true;
  nextTick(()=>{
    updatePageRef.value.handleUpdateData(row);
  })
}

const doDelete = async (row) => {

  const {data} = await axios.delete(`/api/xiangqing/${row.xqid}`)
  console.log(data);
  if(data.code === 200){
    ElMessage.success('删除成功');
    // 删除后刷新列表，属于用户操作，显示提示
    isUserQuery.value = true;
    await doList();
  }else{
    ElMessage.error(data.message);
  }
}
const shortcuts = [
    {
        text: 'Today',
        value: new Date(),
    },
    {
        text: 'Yesterday',
        value: () => {
            const date = new Date()
            date.setDate(date.getDate() - 1)
            return date
        },
    },
    {
        text: 'A week ago',
        value: () => {
            const date = new Date()
            date.setDate(date.getDate() - 7)
            return date
        },
    },
]
</script>

<style scoped>
.container{

}
</style>